<!-- 对 button 组件的编辑 -->
<template>
  <div class="title-edit" v-if="dialogShow" style="width:840px;">
    <SetDesignDialog :title="name" :dialogVisible="dialogShow" :close="close" :saveclose="saveclose"
      ref="settingComponentDialog">
      <div class="edit-container-u">
        <el-tabs v-model="activeName">
          <el-tab-pane label="主标题设置" name="1">
            <div>
              <el-form :label-width="formLabelWidth" @submit.native.prevent>
                <el-form-item label="标题内容" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.maintitle.html" maxlength="200" placeholder="输入内容" style="width:300px;"></el-input>
                </el-form-item>
              </el-form>
              <Color :defValue="data.maintitle.color" :chgValue="(d)=>{data.maintitle.color = d}" />
              <FontFamily :defValue="data.maintitle.fontFamily" :chgValue="(d)=>{data.maintitle.fontFamily = d}" />
              <FontSize :defValue="data.maintitle.fontSize" :chgValue="(d)=>{data.maintitle.fontSize = d}" />
              <FontWeight :defValue="data.maintitle.fontWeight" :chgValue="(d)=>{data.maintitle.fontWeight = d}" />
              <FontStyle :defValue="data.maintitle.fontStyle" :chgValue="(d)=>{data.maintitle.fontStyle = d}" />
              <el-form :label-width="formLabelWidth">
                <el-form-item label="HTML标签" style="margin-bottom:0px;">
                  <el-select size="mini" v-model="data.maintitle.htmlTag" placeholder="请选择">
                    <el-option :label="'无'" :value="''"></el-option>
                    <el-option :label="'H1'" :value="'h1'"></el-option>
                    <el-option :label="'H2'" :value="'h2'"></el-option>
                    <el-option :label="'H3'" :value="'h3'"></el-option>
                    <el-option :label="'H4'" :value="'h4'"></el-option>
                    <el-option :label="'H5'" :value="'h5'"></el-option>
                    <el-option :label="'H6'" :value="'h6'"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="副标题设置" name="2" v-if="eSub">
            <div>
              <el-form :label-width="formLabelWidth" @submit.native.prevent>
                <el-form-item label="标题内容" style="margin-bottom:0px;">
                  <el-input size="mini" v-model="data.subtitle.html" maxlength="200" placeholder="输入内容" style="width:300px;"></el-input>
                </el-form-item>
              </el-form>
              <Color :defValue="data.subtitle.color" :chgValue="(d)=>{data.subtitle.color = d}" />
              <FontFamily :defValue="data.subtitle.fontFamily" :chgValue="(d)=>{data.subtitle.fontFamily = d}" />
              <FontSize :defValue="data.subtitle.fontSize" :chgValue="(d)=>{data.subtitle.fontSize = d}" />
              <FontWeight :defValue="data.subtitle.fontWeight" :chgValue="(d)=>{data.subtitle.fontWeight = d}" />
              <FontStyle :defValue="data.subtitle.fontStyle" :chgValue="(d)=>{data.subtitle.fontStyle = d}" />
              <el-form :label-width="formLabelWidth">
                <el-form-item label="HTML标签" style="margin-bottom:0px;">
                  <el-select size="mini" v-model="data.subtitle.htmlTag" placeholder="请选择">
                    <el-option :label="'无'" :value="''"></el-option>
                    <el-option :label="'H1'" :value="'h1'"></el-option>
                    <el-option :label="'H2'" :value="'h2'"></el-option>
                    <el-option :label="'H3'" :value="'h3'"></el-option>
                    <el-option :label="'H4'" :value="'h4'"></el-option>
                    <el-option :label="'H5'" :value="'h5'"></el-option>
                    <el-option :label="'H6'" :value="'h6'"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="样式选择" name="3">
            <el-form label-width="80px" @submit.native.prevent>
              <el-form-item label="当前样式" style="margin-bottom:3px;">
                <el-input size="mini" style="width:160px;" :disabled="true" v-model="currentTheme" maxlength="32">
                </el-input>
              </el-form-item>
            </el-form>
            <div class="iframe" v-loading="iframeLoading">
              <iframe :src="iframeSrc" frameborder="0" style="width:100%;height:350px;height:calc(100vh - 300px);" ref="iframeRender"></iframe>
            </div>
          </el-tab-pane>
          <el-tab-pane label="链接设置" name="4" v-if="eMore">
            <el-row>
              <el-col :span="12">
                <el-form :label-width="formLabelWidth" @submit.native.prevent>
                  <el-form-item label="链接内容" style="margin-bottom:0px;">
                    <el-input size="mini" v-model="data.more.html" maxlength="32" placeholder="输入内容"></el-input>
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="12">
                <Color :defValue="data.more.color" :chgValue="(d)=>{data.more.color = d}" />
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <LinkSimple :defValue="data.more.link" :chgValue="(d)=>{data.more.link = d}" />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </SetDesignDialog>

  </div>
</template>

<script>
import Color from '@/components/common/design/dialog/component/formitem/Color.vue'
import FontFamily from '@/components/common/design/dialog/component/formitem/FontFamily.vue'
import FontSize from '@/components/common/design/dialog/component/formitem/FontSize.vue'
import FontWeight from '@/components/common/design/dialog/component/formitem/FontWeight.vue'
import FontStyle from '@/components/common/design/dialog/component/formitem/FontStyle.vue'
import LinkSimple from '@/components/common/design/dialog/component/formitem/LinkSimple.vue'
import SetDesignDialog from '@/components/common/dialog/SetDesignDialog.vue'
import * as WindowType from '@/config/windowtype.js'
// import * as PubsubType from '@/config/pubsubtype.js'
import VueFunctions from '@/core/VueFunctions.js'
import BackendjsFunctions from '@/core/BackendjsFunctions.js'
import { mapState } from 'vuex'
// import PubSub from 'pubsub-js'
// import Global from '@/config/global.js'
import qs from 'qs'
import _ from 'lodash'

export default {
  computed: {
    ...mapState([
      'design'
    ]),
    currentTheme () {
      let currentIndex = this.themes.findIndex(element => {
        return parseInt(element.theme) === parseInt(this.data.theme)
      })
      return '编号： ' + (currentIndex + 1)
    },
    eMore () {
      let item = this.themes.find(element => {
        return parseInt(element.theme) === parseInt(this.data.theme)
      })
      if (!item) {
        return false
      }
      return item.more
    },
    eSub () {
      let item = this.themes.find(element => {
        return parseInt(element.theme) === parseInt(this.data.theme)
      })
      if (!item) {
        return false
      }
      return item.sub
    }
  },
  created () {
    VueFunctions.method(WindowType.EDIT_COMPONENT_WITH_COMPONENTTITLE, (bjComponent) => {
      this.close()
      this.dialogShow = true
      this.bjComponent = bjComponent
      this.data = bjComponent.render.data

      this.data.theme = '' + this.data.theme

      this.activeName = '1'
      this.init = true
      this.iframeLoading = true

      this.iframeStyle = {
        w: 825,
        row: 21,
        col: 2,
        compname: 'component_title',
        theme: this.$store.state.site.config.theme,
        color: this.$store.state.site.config.color,
        ttextalign: 'center',
        tcolor: '#888',
        now: new Date().getTime()
      }
      let query = qs.stringify(this.iframeStyle)
      this.iframeSrc = '/api/udin/component?' + query

      this.$nextTick(() => {
        this.$refs['settingComponentDialog'].open()
      })

      // iframe 加载完成后回调的方法，
      let funcname = WindowType.API_UDIN_COMPONENT_ONLOAD_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      window[funcname] = () => {
        this.iframeLoading = false
        let componentName = this.getComponentName()
        let defaultData = BackendjsFunctions.componentDefaultData(componentName)

        let objArray = []
        this.themes.forEach((element, index) => {
          defaultData.ele = '#render-' + (index + 1)
          defaultData.data.theme = element.theme
          defaultData.data.more.link.href = 'javascript:void(0);'
          objArray.push({
            renderData: _.cloneDeep(defaultData),
            title: '编号：' + (index + 1),
            theme: index + 1
          })
        })
        let currentIndex = this.themes.findIndex(element => {
          return parseInt(element.theme) === parseInt(this.data.theme)
        })

        // 调用 iframe 中的 render 方法进行渲染
        this.$refs['iframeRender'].contentWindow.render(objArray, currentIndex + 1)
      }

      // 选择theme后回调的方法，并且传入选择的数据
      let funcallbackname = WindowType.API_UDIN_COMPONENT_ONLOAD_CALLBACK_.replace('[ComponentName]', this.iframeStyle.compname).toUpperCase()
      window[funcallbackname] = (renderData) => {
        this.data.theme = '' + renderData.data.theme
        if (this.init) {
          this.init = false
        }
        // 校验现在的theme是否与iframe显示的选择的theme一致
        this.$refs['iframeRender'].contentWindow.checkTheme(this.data.theme)
      }
    })
  },
  mounted () {
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_CLOSE, (event, data) => {
    //   this.close()
    // })
    // PubSub.subscribe(PubsubType.PUBSUB_DIGLOG_COMPONENT_AND_CONTAINER_CLOSE, (event, data) => {
    //   this.close()
    // })
  },
  data () {
    return {
      dialogShow: false,
      iframeLoading: true,
      iframeStyle: {},
      formLabelWidth: '120px',
      name: '标题',
      bjComponent: null,
      data: null,
      iframeSrc: null,
      themes: themes,
      activeName: '1',
      // 是否第一次进来
      init: true
    }
  },
  methods: {
    getComponentName () {
      var compname = this.iframeStyle.compname
      var temp = this.titleCase(compname.replace('_', ' ')).replace(' ', '')
      return temp.replace(temp[0], temp[0].toLowerCase())
    },
    titleCase (str) {
      return str.toLowerCase().replace(/( |^)[a-z]/g, (L) => L.toUpperCase())
    },
    // ......
    close () {
      this.dialogShow = false
      this.iframeLoading = true
      this.iframeStyle = {}
      this.bjComponent = null
      this.data = null
      this.iframeSrc = ''
      this.activeName = '1'
      this.init = true
    },
    saveclose () {
      this.bjComponent.render.data = _.cloneDeep(this.data)
      BackendjsFunctions.saveComponent(this.bjComponent)
      this.$refs['settingComponentDialog'].close()
    }
  },
  components: {
    SetDesignDialog,
    Color,
    FontFamily,
    FontSize,
    FontWeight,
    FontStyle,
    LinkSimple
  }
}

const themes = [
  { i: 1, theme: '1', sub: true, more: false },
  { i: 2, theme: '16', sub: true, more: false },
  { i: 3, theme: '25', sub: true, more: false },
  { i: 4, theme: '23', sub: true, more: false },
  { i: 5, theme: '24', sub: true, more: false },
  { i: 6, theme: '3', sub: true, more: false },
  { i: 7, theme: '4', sub: true, more: true },
  { i: 8, theme: '5', sub: true, more: true },
  { i: 9, theme: '2', sub: true, more: true },
  { i: 10, theme: '7', sub: true, more: true },
  { i: 11, theme: '8', sub: true, more: true },
  { i: 12, theme: '6', sub: true, more: false },
  { i: 13, theme: '9', sub: true, more: false },
  { i: 14, theme: '10', sub: true, more: false },
  { i: 15, theme: '11', sub: true, more: false },
  { i: 16, theme: '12', sub: true, more: false },
  { i: 17, theme: '13', sub: true, more: false },
  { i: 18, theme: '18', sub: true, more: false },
  { i: 19, theme: '22', sub: true, more: false },
  { i: 20, theme: '14', sub: true, more: false },
  { i: 21, theme: '15', sub: true, more: true },
  { i: 22, theme: '17', sub: true, more: true },
  { i: 23, theme: '19', sub: true, more: true },
  { i: 24, theme: '20', sub: true, more: true },
  { i: 25, theme: '21', sub: false, more: true },
  { i: 26, theme: '27', sub: false, more: true },
  { i: 27, theme: '26', sub: true, more: true },
  { i: 28, theme: '28', sub: true, more: true },
  { i: 29, theme: '29', sub: true, more: true },
  { i: 30, theme: '30', sub: true, more: true },
  { i: 31, theme: '32', sub: true, more: true },
  { i: 32, theme: '31', sub: true, more: false },
  { i: 33, theme: '33', sub: true, more: false },
  { i: 34, theme: '34', sub: true, more: false },
  { i: 35, theme: '35', sub: true, more: false },
  { i: 36, theme: '36', sub: true, more: false },
  { i: 37, theme: '37', sub: true, more: false },
  { i: 38, theme: '40', sub: true, more: false },
  { i: 39, theme: '38', sub: true, more: true },
  { i: 40, theme: '39', sub: true, more: true },
  { i: 41, theme: '41', sub: true, more: false }
]

</script>

<style scoped>
.edit-container-u {
  width: 840px;
  min-height:410px;
  min-height:calc(100vh - 200px);
}
</style>
